<template>
  <div class="tab-list">
    <div
      v-for="(item, index) of tabList"
      :key="item.label + '' + index"
      class="tab-item"
      :class="{ active: value === item[valueName], disabled: item.disabled }"
      :title="item.title"
      @click="handleChoose(item)"
    >
      {{ item.label }}
    </div>
  </div>
</template>
<script lang="ts">
  import { computed } from "vue";

  export default {
    name: "EwgTab",
    props: {
      tabList: {
        type: Array,
        default: () => [],
      },
      value: {
        type: [Number, String],
        required: true,
      },
      useLabel: {
        type: Boolean,
        default: false,
      },
    },
    emits: {
      "update:value"(payload: any) {
        return payload;
      },
    },
    setup(props: any, context: any) {
      const valueName = computed(() => (props.useLabel ? "label" : "value"));
      const handleChoose = (row: any) => {
        if (row.disabled) return;
        if (row[valueName.value] === props.value) return;
        context.emit("update:value", row[valueName.value]);
      };
      return {
        handleChoose,
        valueName,
      };
    },
  };
</script>
<style lang="scss" scoped>
  .tab-list {
    margin: 5px;
    display: flex;
    align-items: center;
    color: $--color-white-half;
    .tab-item {
      cursor: pointer;
      margin-left: 5px;
      &:first-of-type {
        margin-left: 0;
      }
      &:hover {
        color: $--color-white;
      }
      &:active {
        color: $--color-white-half-quarter;
      }
      &.active {
        color: $--color-white;
      }
      &.disabled {
        cursor: not-allowed;
        color: $--color-white-quarter;
      }
    }
  }
</style>
